<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <title>Delivered Order</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <script src="/js/dropdown.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="/css/dashboard.css" rel="stylesheet">

    <script src="/js/ie8-responsive-file-warning.js"></script>
    <script src="/js/ie-emulation-modes-warning.js"></script>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="/js/order.js"></script>
</head>

<body>
<div th:replace="/catalog/header"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li ><a href="/catalog/main">
                    <i class="glyphicon glyphicon-globe" aria-hidden="true"> </i>
                    Main </a></li>

                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="glyphicon glyphicon-check" aria-hidden="true"> </i>
                        Manage
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/order/allOrder">Order</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/catalog/item">Catalog</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/account/account">Account</a></li>
                    </ul>
                </li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="glyphicon glyphicon-user" aria-hidden="true"> </i>
                        Manager
                        <span class="sr-only">(current)</span>
                        <span class="caret"></span>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="/manager/profile">Check</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/manager/managerchange">Change</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search..." id="searchContent">
                <button type="button" class="btn btn-default" onclick="showSearch()" data-toggle="modal" data-target="#myModal2">Search</button>
            </form>
            <h1 class="page-header">Order</h1>
            <!--删除成功提示栏-->
            <div class="alert alert-success alert-dismissable" id="remind" style="display:none;">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                An Order information was successfully deleted.
            </div>
            <div class="alert alert-info alert-dismissable" id="remind3" style="display:none;">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                The order was succesfully edited.
            </div>
            <ul class="nav nav-pills">
                <li>
                    <a href="/order/allOrder">All
                        <span class="badge" th:text="${orderList.size()}" ></span>
                    </a>
                </li>
                <li>
                    <a href="/order/waitOrder">Wait Diliver
                        <span class="badge" th:text="${waitOrderList.size()}"></span>
                    </a>
                </li>
                <li  class="active">
                    <a href="/order/deliveredOrder">Dilivered
                        <span class="badge" th:text="${deliveredOrderList.size()}"></span>
                    </a>
                </li>
            </ul>
            <!--Order表-->
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>OrderId</th>
                        <th>BuyerName</th>
                        <th>ShipAddress</th>
                        <th>BillAddress</th>
                        <th>CardType</th>
                        <th>CreditCard</th>
                        <th>TotalPrice</th>
                        <th>Status</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="deliveredOrder:${deliveredOrderList}">
                        <td id="orderId" th:text="${deliveredOrder.orderId}">Lorem</td>
                        <td id="username" th:text="${deliveredOrder.username}">ipsum</td>
                        <td id="shipAddress" th:text="${deliveredOrder.shipAddress1}">sit</td>
                        <td id="billAddress" th:text="${deliveredOrder.billAddress1}">1,001</td>
                        <td id="cardType" th:text="${deliveredOrder.cardType}">dolor</td>
                        <td id="creditCard" th:text="${deliveredOrder.creditCard}">Lorem</td>
                        <td id="totalPrice" th:text="${deliveredOrder.totalPrice}">ipsum</td>
                        <td id="status" th:text="${deliveredOrder.status}">dolor</td>
                        <td>
                            <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" onclick="edit(this)">Edit</button>
                            <button type="button" class="btn btn-link" onclick="delete_confirm3(this)">Delete</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-4">
                        <ul class="pagination">
                            <li><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--搜索结果框-->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 900px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel2">Search Result</h4>
                </div>
                <div class="modal-body">
                    <div class="table-responsive" style="height: 400px;">
                        <table class="table table-striped able-bordered table-hover" id="modal-table-table">
                            <thead>
                            <tr>
                                <th>OrderId</th>
                                <th>BuyerName</th>
                                <th>ShipAddress</th>
                                <th>BillAddress</th>
                                <th>CardType</th>
                                <th>CreditCard</th>
                                <th>TotalPrice</th>
                                <th>Status</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="modal-table-body">

                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Order Information Editing
                    </h4>
                </div>
                <div class="modal-body" style="height: 250px">
                    <form class="navbar-form navbar-left">
                        <form class="navbar-form navbar-left">
                            OrderId:<input type="text" class="form-control" style="width: 150px"  th:value="111" id="modal_orderId" disabled="disabled"><span></span>
                            BuyerName:<input type="text" class="form-control" style="width: 150px"  th:value="123" id="modal_buyerName" disabled="disabled"><br>
                            <p></p>
                            ShipAddress:<input type="text" class="form-control" style="width: 150px" th:value="123" id="modal_shipAddress"><span></span>
                            BillAddress:<input type="text" class="form-control" style="width: 150px" th:value="111"  id="modal_billAddress"><br>
                            <p></p>
                            CardType:<input type="text" class="form-control" style="width: 150px" th:value="111" id="modal_cardType"><span></span>
                            CreditCard:<input type="text" class="form-control" style="width: 200px" th:value="123"  id="modal_creditCard"><br>
                            <p></p>
                            TotalPrice:<input type="text" class="form-control" style="width: 150px" th:value="111"  id="modal_totalPrice"><span></span>
                            Status:<div class="input-group">
                            <input type="text" class="form-control" style="width: 150px" id="modal_status">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    Choose
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu pull-right" id="lists">
                                    <li onclick="showsY()" value="Y">Y</li>
                                    <li class="divider"></li>
                                    <li onclick="showsN()" value="N">N</li>
                                </ul>
                            </div><!-- /btn-group -->
                        </div><!-- /input-group -->
                            <p></p>
                        </form>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" onclick="apply()">
                        Apply
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/vendor/holder.min.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>